<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#main {
				width: 300px;
				height: 200px;
				background: #f2f2f2;
				color: #fff;
				margin: 20px auto;
				position: relative;
				overflow: hidden;
			}
			
			
			/*@Keyframes changeBgcColor {
				  0%{
				    transform: translate(0px);
				  }
				  15%{
				    transform: translate(45px,0px);
				  }
				  30%{
				    transform: translate(90px,0px);
				  }
				  45%{
				    transform: translate(135px,0px);
				  }
				  60%{
				    transform: translate(180px,0px);
				  }
				  75%{
				    transform: translate(225px,0px);
				  }
				  90%{
				    transform: translate(270px,0px);
				  }
				  100%{
				    transform: translate(300px,0px);
				  }
			}*/
			
			#main:hover .mask {
				/*animation-name: changeBgcColor;
						  	animation-duration: 5s;
						 	animation-timing-function: ease-out;
						 	animation-delay: .1s;
							animation: changeBgcColor 5s ease-out .2s;*/
				/*animation: changeBgcColor 2s linear 0.2s;
							animation-fill-mode: forwards;*/
				right: 0;
			}
			
			.mask {
				width: 300px;
				height: 200px;
				position: absolute;
				right: 300px;
				background: rgba(249, 205, 173, 0.8);
				transition: right 2s;
				-moz-transition: right 2s;
				/* Firefox 4 */
				-webkit-transition: right 2s;
				/* Safari and Chrome */
				-o-transition: right 2s;
				/* Opera */
			}
		</style>
	</head>
	<body>
		<div id="main"><div class="mask"></div></div>
	</body>
</html>